<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        table {
            border-collapse: collapse;
            margin: 100px;
        }
        
        .jian,
        .jia {
            width: 20px;
            height: 20px;
            border: 1px solid #000;
            display: inline-block;
            text-align: center;
        }
        
        [type=text] {
            width: 30px;
            height: 20px;
            outline: none;
            border: 1px solid #000;
        }
        
        .cont {
            width: 100px;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 80px;
            justify-content: center;
            position: relative;
        }
        
        .cont>div:first-child {
            display: flex;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .cont>div:nth-child(2) {
            position: absolute;
            font-size: 10px;
            color: red;
            bottom: 10px;
            display: none;
        }
        
        tr:not(:first-child)>td:nth-child(1) {
            width: 50px;
            text-align: center;
        }
        
        tr>td:nth-child(2) {
            width: 60px;
            text-align: center;
        }
        
        tr:not(:first-child)>td:last-child {
            width: 80px;
            text-align: center;
        }
        
        tr:first-child>td {
            padding-left: 20px;
        }
        
        .delAll {
            text-align: left;
        }
        
        .one {}
    </style>
</head>

<body>
    <table border="1" style="width:585px">
        <tr>
            <td colspan='7'><input type="checkbox" name="" class="allChecked">全选</td>
        </tr>
        <tr style="height:80px" class="pItem">
            <td class="check"><input class="checkItem" type="checkbox"></td>
            <td>商品1</td>
            <td>颜色：玫瑰金</td>
            <td>￥：<span>100</span>.00</td>
            <td class="cont">
                <div class="circle">
                    <span class="jian">-</span>
                    <input class="item" type="text" value="1">
                    <span class="jia">+</span>
                </div>

                <div class="one">至少选择1件</div>
            </td>
            <td class="lineTotal">
                ￥:
                <span class="itemTotalPrice">100</span>.00
            </td>
            <td>
                <a href="javascript:;" class="delItem">删除</a>
            </td>
        </tr>
        <tr style="height:80px" class="pItem">
            <td class="check"><input class="checkItem" type="checkbox"></t>
                <td>商品2</td>
                <td>颜色：红色</td>
                <td>￥：<span>100</span>.00</td>
                <td class="cont">
                    <div class="circle">
                        <span class="jian">-</span>
                        <input type="text" value="1">
                        <span class="jia">+</span>
                    </div>
                    <div class="one">至少选择1件</div>
                </td>
                <td class="lineTotal">
                    ￥:
                    <span class="itemTotalPrice">100</span>.00
                </td>
                <td>
                    <a href="javascript:;" class="delItem">删除</a>
                </td>
        </tr>
        <tr style="height:80px" class="pItem">
            <td class="check"><input class="checkItem" type="checkbox"></t>
                <td>商品3</td>
                <td>颜色：橘色</td>
                <td>￥：<span>100</span>.00</td>
                <td class="cont">
                    <div class="circle">
                        <span class="jian">-</span>
                        <input type="text" value="1">
                        <span class="jia">+</span>
                    </div>
                    <div class="one">至少选择1件</div>
                </td>
                <td class="lineTotal">
                    ￥:
                    <span class="itemTotalPrice">100</span>.00
                </td>
                <td>
                    <a href="javascript:;" class="delItem">删除</a>
                </td>
        </tr>
        <tr style="height:30px">
            <td><input type="checkbox" name="" class="allChecked">全选</td>
            <td colspan="4" class="delAll"><a href="javascript:;">删除选中商品</a></td>
            <td>已选中<span class="checkedNum">0</span>件商品</td>
            <td>￥：<span class="totalPrice">0</span></td>
        </tr>
    </table>
    <script src="../jQuery库/jquery-2.2.4.js"></script>
    <script>
        $('.circle').on('click', 'span', function() {
            let $this = $(this);
            let singlePrice = $this.parent().parent().prev().find('span').html(); //单价
            let $singleTotalPriceNode = $this.parent().parent().next().find('span'); //单行总价
            let $amount = $this.siblings('[type=text]');
            let num = $amount.val(); //数量
            let lineTotal = 0;


            if ($this.html() == '+') {
                $amount.val(++num)
                $this.siblings('span').show()
                $this.parent().siblings().css("display", "none");
            } else {

                if (num <= 1) {
                    $this.hide()
                    $this.parent().siblings(".one").show();
                    console.log($this.parent().siblings(".one"))
                    return;
                }
                $amount.val(--num)

            }

            lineTotal = num * singlePrice;

            $singleTotalPriceNode.html(lineTotal);


            if ($(".checkItem:checked").length) {
                checkItemTotal()
            }
        })


        //每一项的点击事件
        $('.checkItem').on('click', function() {

            $('.allChecked').prop('checked', $('.checkItem').length == $('.checkItem:checked').length)

            checkItemTotal()

        })

        //全选
        $(".allChecked").on("click", function() {
            let $this = $(this);
            $(".checkItem,.allChecked").prop("checked", $this.prop("checked"))
            checkItemTotal()
        })


        //总价
        function checkItemTotal() {
            let checkItem = $(".checkItem:checked");
            let arr = [];
            let sum = 0;
            checkItem.each(function(index, item) {
                let lineTotal = $(item).parent().siblings(".lineTotal").find(".itemTotalPrice").html();
                arr.push(Number(lineTotal))
            })
            arr.forEach(function(item, index) {
                sum += item
            })
            $(".totalPrice").html(sum)

        }




        //全部删除

        $(".delAll>a").on("click", function() {
            if ($(".allChecked").prop("checked")) {
                if (confirm("确定要清空购物车吗？")) {
                    $(".checkItem").parent().parent().remove();
                    $(".allChecked").prop("checked", false);
                    $(".totalPrice").html(0)
                }
            }

            if ($(".checkItem:checked").length) {
                if (confirm("确定要选中商品吗？")) {
                    $(".checkItem:checked").parent().parent().remove()
                    $(".totalPrice").html(0)
                }
            }
        })

        //单独的删除
        $(".delItem").on("click", function() {
            let $this = $(this);
            if ($this.parent().siblings(".check").find(".checkItem").prop("checked")) {
                if (confirm("确定要删除该商品吗？")) {
                    $this.parent().parent().remove();
                    checkItemTotal()
                }
            } else {
                alert("请选择要删除的商品")
            }
        })
    </script>

</body>

</html>